import * as React from "react"
import { observable } from "mobx"
import { observer, inject } from "mobx-react"
import FN from "../tools/fn"

import { Router, Switch, Redirect, withRouter, Link,Route} from 'react-router-dom'
import { hashHistory } from 'react-router';
import routes from '../routes/chidRoute.js'

@inject("article")
@observer
export default class ChildrenRouter extends React.Component {
  constructor(props) {
    super(props)
    this.store = this.props.article
  }
  render() {
      console.log(this.props.match)
    return (
        <div>
        <div className="am-list">
            <div className="am-list-header">子路由（路由裁剪）</div>
            <div className="am-list-body">
                <div className="am-list-item">
                  <Link to={`/childRouter/react`} className="am-list-content">react</Link>
                  <div className="am-list-arrow" aria-hidden="true"><span className="am-icon arrow horizontal"></span></div>
                </div>
                <div className="am-list-item">
                  <Link to={`/childRouter/router`} className="am-list-content">ROUTER</Link>
                  <div className="am-list-arrow" aria-hidden="true"><span className="am-icon arrow horizontal"></span></div>
                </div>
                <div className="am-list-item">
                 <Link to={`/childRouter/redux`} className="am-list-content">REDUX</Link>
                 <div className="am-list-arrow" aria-hidden="true"><span className="am-icon arrow horizontal"></span></div>
                </div>
            </div>
        </div>

        <Switch>
            <Redirect exact from="/childRouter/" to="/childRouter/react" />
            {routes.map((route, i) => <Route strict key={i} {...route} />)} 
        </Switch>
      </div>
    )
  } 
}


